<template>
  <div class="movie-item-card"
       v-for="item in items"
       :class="item.id=== selectItem?'active':null"
       @click="clickItem(item.id)"
  >

    <div class="item-card-icon" :style="{backgroundImage:`url(${item.avatar})`}">

    </div>
    <div class="item-card-label ">
      {{ item.label }}
    </div>
  </div>
</template>

<script lang="ts" setup>
import {ref} from "vue";

import movieItemJson from "@/assets/data/movie-item.json"

const items = movieItemJson
items[1].avatar

const selectItem = ref(1)
const clickItem = (id: number) => {
  selectItem.value = id
}
</script>

<style lang="less" scoped>

.movie-item-card:hover{
  transform: scale(1.1);
}

.movie-item-card {
  width: 100%;
  padding: 0 10px;
  margin-top: 5px;
  height: 40px;

  display: flex;
  border-radius: 5px;
  backdrop-filter: blur(5px);
  background-size: 100% 50px;
  background: url("@/assets/icons/transparent.png") no-repeat center;
  align-items: center;

  .item-card-icon {
    width: 25px;
    height: 25px;
    background-size: 25px 25px;
    background-repeat: no-repeat;
    background-position: center;

  }

  .item-card-label {
    font-size: 16px;
    color: white;
    margin-left: 15px;
  }


}

.active {
  border: 2px solid white;
  transform: scale(1.1);
  box-shadow: rgba(0, 0, 0, 0.19) 0 10px 20px, rgba(0, 0, 0, 0.23) 0 6px 6px;
}
</style>